<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners" :visible.sync="showDialog" @open="onOpen" @close="onClose" title="添加用户">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
          <el-col :span="24">

          </el-col>
          <el-col :span="12">
            <el-form-item label="id" prop="eId">
              <el-input v-model="formData.eId" placeholder="请输入id" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="员工名称" prop="eName">
              <el-input v-model="formData.eName" placeholder="请输入员工名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="部门编号" prop="dNum">
              <el-input v-model="formData.dNum" placeholder="请输入部门编号" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="职位编号" prop="pNum">
            <el-input v-model="formData.pNum" placeholder="请输入职位编号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="身份证" prop="card">
              <el-input v-model="formData.card" placeholder="请输入身份证" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入电话号码" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-input v-model="formData.sex" placeholder="请输入性别" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="生日" prop="birthday">
              <el-date-picker
              v-model="formData.birthday"
              type="date"
              placeholder="生日">
              <el-input v-model="formData.birthday" placeholder="请输入生日" clearable :style="{width: '100%'}">
              </el-input>
            </el-date-picker>
            </el-form-item>

          </el-col>

        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import ImageCropper from '../../components/ImageCropper/index'
  import PanThumb from '../../components/PanThumb/index'

  export default {
    name: 'EmployeesAdd',
    components: {ImageCropper, PanThumb},
    // 接受父组件传递的值
    props:{
      addVisible:{
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        formData: {
          eId: undefined,
          eName: undefined,
          dNum: undefined,
          pNum: undefined,
          card: undefined,
          phone: undefined,
          sex: undefined,
          birthday: undefined,
        },
        // 控制弹出框显示隐藏
        showDialog:false,
        imagecropperShow: false, // 是否显示上传组件
        imagecropperKey: 0, // 上传组件id
        image: 'http://47.93.37.158:8888/group1/M00/00/00/rBklB2B6dKSAImyzAAIcU_dRVxE613.png',
        rules: {
          eName: [{
            required: true,
            message: '请输入员工名称',
            trigger: 'blur'
          }],
          dNum: [{
            required: true,
            message: '请选择部门编号',
            trigger: 'blur'
          }],

          pNum: [{
            required: true,
            message: '请输入职位编号',
            trigger: 'change'
          }],
          eId: [{
            required: true,
            message: '请输入员工编号',
            trigger: 'blur'
          }]

        },
        field101Action: 'https://jsonplaceholder.typicode.com/posts/',
        field101fileList: [],
        sexOptions: [{
          "label": "帅哥",
          "value": 1
        }, {
          "label": "美女",
          "value": 2
        }],
      }
    },
    computed: {},
    watch: {
      // 监听 addOrUpdateVisible 改变
      addVisible(oldVal,newVal){
        this.showDialog = this.addVisible
      },
    },
    created() {},
    mounted() {},
    methods: {

      onOpen() {

      },
      onClose() {
        this.$refs['elForm'].resetFields()
        this.$emit('changeShowAdd', 'false')
      },
      close() {
        this.$emit('changeShowAdd', 'false');
        location.reload();
      },
      handelConfirm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return;
          this.$axios.post("/sys/employee",this.formData).then((response) => {
          });
          location.reload()
          this.close();
        })
      }}
  }

</script>
<style>
  .el-upload__tip {
    line-height: 1.2;
  }

</style>
